<template>
  <div :class="$style.page">
    <el-tabs>
      <el-tab-pane label="流光字体">
        <el-form inline>
          <el-form-item label="渐变色 1">
            <el-color-picker v-model="color1"></el-color-picker>
          </el-form-item>
          <el-form-item label="渐变色 2">
            <el-color-picker v-model="color2"></el-color-picker>
          </el-form-item>
        </el-form>
        <div
          :class="$style.fleeting"
          :style="{
            '--color1': color1,
            '--color2': color2
          }"
        >
          流光文字流光文字流光文字
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
const color1 = ref('#48d5dd')
const color2 = ref('#237efd')
</script>

<style lang="scss" module>
@use './style.scss';
</style>
